<template>
  <div class="reward-container">
    <div class="title">收益概要</div>
    <el-form
      :inline="true"
      :model="rewardForm"
      ref="rewardFormRef"
      class="demo-form-inline"
    >
      <el-form-item prop="timeRadio">
        <el-radio-group v-model="rewardForm.timeRadio">
          <el-radio label="1">今日实时</el-radio>
          <el-radio label="2">
            <span class="label">时间范围</span>
            <ElConfigProvider :locale="zhCn">
              <el-date-picker
                :default-time="defaultTime"
                :disabled="rewardForm.timeRadio == 1"
                :disabled-date="disabledDate"
                v-model="rewardForm.time"
                type="daterange"
                unlink-panels
                range-separator="-"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              >
              </el-date-picker>
            </ElConfigProvider>
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">查询</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row class="data-total">
      <div class="data-item">
        <span class="label">注册人数</span>
        <span class="value">{{ penalInfo.new_members }}</span>
      </div>
      <div class="data-item">
        <span class="label">充值人数</span>
        <span class="value">{{ penalInfo.recharge_members }}</span>
      </div>
      <div class="data-item">
        <span class="label">充值次数</span>
        <span class="value">{{ penalInfo.recharge_num }}</span>
      </div>
      <div class="data-item">
        <span class="label">充值金额</span>
        <span class="value">{{
          penalInfo.recharge_fee ? "￥" + penalInfo.recharge_fee : ""
        }}</span>
      </div>
      <div class="data-item">
        <span class="label">预估收入</span>
        <span class="value">{{
          penalInfo.est_income ? "￥" + penalInfo.est_income : ""
        }}</span>
      </div>
    </el-row>
    <div class="title mt-30">收益明细</div>
    <el-table class="table" :data="info.list" border style="width: 100%">
      <el-table-column prop="date" label="日期" :formatter="formatterDate" />
      <el-table-column prop="new_members" label="注册人数" />
      <el-table-column prop="recharge_members" label="充值人数" />
      <el-table-column prop="recharge_num" label="充值次数" />
      <el-table-column
        prop="recharge_fee"
        :formatter="formatterMoney"
        label="充值金额"
      />
      <el-table-column
        prop="est_income"
        :formatter="formatterMoney"
        label="预估收入"
      />
    </el-table>
    <el-row class="mt-30" justify="end">
      <el-pagination
        :total="info.total"
        v-model:current-page="info.params.page"
        :page-sizes="[2, 5, 10, 15, 20]"
        v-model:page-size="info.params.page_size"
        layout="sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination
    ></el-row>
  </div>
</template>

<script>
import { reactive, ref, toRaw, onMounted, computed } from "vue";
import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
];
const disabledDate = (time) => {
  return time.getTime() > Date.now() - 24 * 60 * 60 * 1000;
};
import { penal, panellists } from "@/api/api";
import { usePage } from "@/useApi/usePage";

export default {
  components: {
    ElConfigProvider,
  },
  setup() {
    //表单
    const rewardForm = reactive({
      timeRadio: "1",
      time: ["", ""],
    });
    const rewardFormRef = ref(null);
    const submitForm = () => {
      rewardFormRef.value.validate((valid) => {
        if (valid) {
          requestPenal();
          resetTable();
          requestApi(c_time());
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    };
    const resetForm = () => {
      rewardForm.time = "";
      rewardFormRef.value.resetFields();
    };
    //时间参数
    const c_time = () => {
      let time;
      //今日实时
      if (rewardForm.timeRadio == "1") {
        const now = new Date();
        const nowTime = {
          startTime: `${now.getFullYear()}-${
            now.getMonth() + 1
          }-${now.getDate()}`,
          endTime: `${now.getFullYear()}-${
            now.getMonth() + 1
          }-${now.getDate()}`,
        };
        time = nowTime;
      }
      // 指定范围
      else {
        const startTime = new Date(rewardForm.time[0]);
        const endTime = new Date(rewardForm.time[1]);
        time = {
          startTime: `${startTime.getFullYear()}-${
            startTime.getMonth() + 1
          }-${startTime.getDate()}`,
          endTime: `${endTime.getFullYear()}-${
            endTime.getMonth() + 1
          }-${endTime.getDate()}`,
        };
      }
      return time;
    };
    //收益数据面板
    const penalInfo = ref({});
    const requestPenal = async () => {
      try {
        const {
          data: { data },
        } = await penal(c_time());
        penalInfo.value = data;
      } catch (error) {
        console.log("error", error);
      }
    };
    //分页
    const { info, requestApi } = usePage(panellists);
    const resetTable = (page_size = 5) => {
      info.params.page = 1;
      info.total = 0;
      info.params.page_size = page_size;
    };
    const handleSizeChange = () => {
      resetTable(info.params.page_size);
      requestApi(c_time());
    };
    const formatterMoney = (row, column, cellValue, index) => {
      return `￥${cellValue}`;
    };
    const formatterDate = (row, column, cellValue, index) => {
      return `${row.stats_year}-${row.stats_month}-${row.stats_date}`;
    };
    const handleCurrentChange = () => {
      requestApi(c_time());
    };
    onMounted(() => {
      requestPenal();
      requestApi(c_time());
    });
    return {
      formatterDate,
      penalInfo,
      submitForm,
      resetForm,
      rewardFormRef,
      rewardForm,
      zhCn,
      defaultTime,
      info,
      handleCurrentChange,
      handleSizeChange,
      formatterMoney,
      disabledDate,
    };
  },
};
</script>

<style lang="less" scoped>
.reward-container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  flex: 1;
  box-sizing: border-box;
  .title {
    font-size: 20px;
    font-weight: bold;
  }
  .mt-30 {
    margin-top: 30px;
  }
  .demo-form-inline {
    margin-left: 50px;
    margin-top: 30px;
    .label {
      margin-right: 20px;
    }
  }
  .data-total {
    margin-top: 30px;
    .data-item {
      margin: 0 20px;
      flex: 1;
      height: 120px;
      background: rgb(235, 243, 248);
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .label {
        font-size: 16px;
        font-weight: bold;
      }
      .value {
        margin-top: 30px;
        font-size: 14px;
      }
    }
  }
  .table {
    margin-top: 15px;
    flex: 1;
  }
}
</style>
